<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="">用户名 <input type="text"  value="trump" data-value='自定义属性'></label>
    <!-- 
        属性结点：
        元素对象.attributes ; 获取所有的属性结点
        getAttribute();
        setAttribute();
        removeAttribute()

        H5：
          自定义属性 data- 规范data-开头  后面加上属性名data-index data-id
          获取data- 开头的自定义属性可以用dataset


     -->
     <script>
         var input=document.querySelector("input")
         var val=input.getAttribute('value')  //获取
         console.log(val);
         input.setAttribute('value','biden')  //修改
         input.removeAttribute("value")

         //第二种方法
         var dataValue=input.getAttribute('data-value')
         console.log(dataValue);
         input.setAttribute('data-value','修改之后的data-value')
        //  input.removeAttribute('data-value')

        //第三种方法
        var dataSet=input.dataset;
        console.log(dataSet);
        dataSet.id='dataset修改的id'
        dataSet.name='修改的name';
        // input.dataset('data-value','dataset方法的data-value')


         
     </script>

</body>
</html>